var gulp=require('gulp')
var uglify=require('gulp-uglify')// 用于压缩文件(好像只能压缩js文件)
var concat=require('gulp-concat')// 指定最终打包文件名
var rename=require('gulp-rename')// 重命名
var less=require('gulp-less')//编译less文件为css
var cleanCss=require('gulp-clean-css')//用于兼容 ie  压缩css要这个
var htmlMin=require('gulp-htmlmin')// 处理html文件
var livereload=require('gulp-livereload')//自动打包(实现半自动)
var connect=require('gulp-connect')//实现全自动
gulp.task('server',['default'],function () { 
  gulp.watch(['src/js/**/*.js'],['js'])//确认监听的目标以及绑定的任务(以后只要对应目录下的文件发生了改变就触发对应任务)
  gulp.watch(['src/less/**/*.less','src/css/**/*.css'],['css'])//由于 css任务依赖于less任务 所以只需要绑定css
  connect.server({
    root:'dist',
    livereload:true,
    post:5000
  })
})
gulp.task('watch',['default'],function(){//半自动
  livereload.listen()//开启监听
  gulp.watch(['src/js/**/*.js'],['js'])//确认监听的目标以及绑定的任务(以后只要对应目录下的文件发生了改变就触发对应任务)
  gulp.watch(['src/less/**/*.less','src/css/**/*.css'],['css'])//由于 css任务依赖于less任务 所以只需要绑定css
})
gulp.task('html',function(){// 打包压缩html文件
  return gulp.src('index.html')
  .pipe(htmlMin({collapseWhitespace:true}))
  .pipe(gulp.dest('dist/'))
  .pipe(livereload())//每个任务最后开启livereload
  .pipe(connect.reload())
})
gulp.task('less',function(){// 将less转化为css
  return gulp.src('src/less/**/*.less')
  .pipe(less())               //把less文件转换为css文件
  .pipe(gulp.dest('src/css/'))
  .pipe(livereload())//每个任务最后开启livereload
  .pipe(connect.reload())
})
// 打包压缩css
gulp.task('css',['less'],function(){// 打包css依赖于less执行完毕 所以加上依赖项 当依赖项执行完毕后才会执行 css
  return gulp.src('src/css/**/*.css')  // return --->异步
  .pipe(concat('build.css'))
  .pipe(rename({suffix:'.min'}))
  .pipe(cleanCss({compatibility:'ie8'}))//压缩css文件必须要这个
  .pipe(gulp.dest('dist/css/'))
  .pipe(livereload())//每个任务最后开启livereload
  .pipe(connect.reload())
}) 
gulp.task('js',function () { //gulp  打包js文件   命令行中输入  gulp 任务名(此处为js)
  return gulp.src('src/js/**/*.js')   //找到目标源文件把  数据读取到gulp的内存中
  .pipe(uglify())                     //压缩文件
  .pipe(concat('build.js'))           //指定合并的文件名
  .pipe(gulp.dest('dist/js/'))        //指定合并到的文件目录
  .pipe(rename({suffix:'.min'}))      //重命名
  .pipe(gulp.dest('dist/js/'))        //指定合并到的文件目录
  .pipe(livereload())//每个任务最后开启livereload
  .pipe(connect.reload())
})
gulp.task('default',['js','less','css','html'])// 当直接执行gulp命令的时候运行这个
